<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>收货地址</title>
	<link rel="stylesheet" href="../style/default.css">
	<link rel="stylesheet" href="../style/receAddress.css" />
	<link rel="stylesheet" href="../style/ma_attention.css" />
	<link rel="stylesheet" href="../style/public.css" />
</head>

<body>
	<div class="public_nav">
		<div class="bx nav">
			<ul class="right_nav">
				<li>
					<a href="javascript:;">我的美妆</a>
					<span>|</span>
				</li>
				<li>
					<div class="pinpai">
						<a class="btn" href="javascript:;">关注品牌 </a>
						<span>|</span>
						<div class="two_ji_nav">
							<div class="two_nav_one">
								<a href="javascript:;">科颜氏</a>
								<a href="javascript:;">雪花秀</a>
								<a href="javascript:;">香奈儿</a>
							</div>
							<div class="two_nav_two">
								<a href="javascript:;">奥比虹</a>
								<a href="javascript:;">希思黎</a>
								<a href="javascript:;">奥迪</a>
							</div>
						</div>
					</div>
				</li>
				<li>
					<a href="javascript:;">购物车</a>
					<span>|</span>
				</li>
				<li>
					<a href="javascript:;">收藏夹</a>
					<span>|</span>
				</li>
				<li>
					<a href="javascript:;">商家入驻</a>
					<span>|</span>
				</li>
				<li>
					<a href="javascript:;">帮助中心</a>
					<span>|</span>
				</li>
			</ul>
			<div class="left_nav">
				<span>您好 欢迎来到美妆商城！</span>
				<a id="sgin" href="javascript:;">请登录</a>
				<a href="javascript:;">免费注册</a>
			</div>
		</div>
	</div>
	<div class="header cf">
		<div class="had bx">
			<div class="logo">
				<a href="javascript:;">
					<img src="" alt="">
				</a>
			</div>
			<div class="lg">
				<div class="lg_cent">
					<input type="text" />
					<div>请输入关键字</div>
					<a href="javascript:;"><i></i></a>
				</div>
			</div>
			<div class="gzh cf">
				<p>关注微信</p>
				<div class="ewm"><img src=""></div>
			</div>
		</div>
	</div>
	<div class="navitems">
		<div class="nav_cont bx">
			<a class="category" href="javascript:;">
				<i></i>
				<span>所有产品类别</span>
			</a>
			<a class="home_page gg_one" href="javascript:;">首页</a>
			<a class="direct_sale gg_one" href="javascript:;">官方直售</a>
			<a class="vip gg_one " href="javascript:;">会员专享</a>
			<a class="special_counter gg_one" href="javascript:;">线上专柜</a>
		</div>
	</div>
	<div class="cont bx cf" style="margin: 40px auto;">
		<div class="cont_left">
			<div class="attention_left">
				<div class="userName">用户中心</div>
				<div class="all_orders_left_bom1 oncc">
					<h5>资料管理</h5>
					<ul>
						<li>个人资料</li>
						<li>实名认证</li>
						<li class="click">收货信息</li>
					</ul>
				</div>
				<div class="all_orders_left_bom1">
					<h5>订单管理</h5>
					<ul>
						<li>全部订单</li>
						<li>未支付订单</li>
						<li>已支付订单</li>
					</ul>
				</div>
				<div class="all_orders_left_bom1">
					<h5>我的交易</h5>
					<ul>
						<li>我的关注</li>
						<li>我的收藏</li>
						<li>我的评价</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="cont_right">
			<p>收货信息</p>
			<div class="raceadd cf">
				<div class="form_">
					<div class="infortitle cf">
						<ul class="cf">
							<li class="name">收货人姓名</li>
							<li class="phone">联系电话</li>
							<li class="address">详细地址</li>
							<li class="default">是否默认地址</li>
							<li class="operation">操作</li>
						</ul>
					</div>
					<div class="race">

					</div>
				</div>
				<div class="toaddress cf">
					<span>添加收货地址</span>
				</div>
			</div>
			<div class="cont_add_ress" style="display: none;">
				<div class="addressee">
					<span>收件人:</span>
					<input type="text" id="ressee" placeholder="请输入收件人名称" />
					<div class="regu_ress"></div>
				</div>
				<div class="addphone">
					<span>手机号:</span>
					<input type="text" id="phone" placeholder="请输入手机号码" />
					<div class="regu_phone"></div>
				</div>
				<div class="receiving cf">
					<div class="receiving_tp">
						<span>收货地址:</span>
						<option id="opt" class="opt"></option>
						<select id="province_id" class="form-control">
							<option>--省份选择--</option>
						</select>
						<select id="city_id" class="form-control">
							<option>--城市选择--</option>
						</select>
						<select id="county_id" class="form-control">
							<option>--县(区、州)选择--</option>
						</select>
					</div>
					<div class="ct"><label for="jtid">具体地址：</label><input type="text" id="jtid" class="form-control" />
					</div>
				</div>
				<div class="default_dd">
					<span>设为默认:</span>
					<input type="checkbox" id="whether" value="" /><label for="whether">是</label>
				</div>
				<div class="opion cf">
					<div class="switch_">
						<div class="preser preser_">保存</div>
					</div>
					<div class="return">返回</div>
				</div>
			</div>
		</div>
	</div>
	</div>
	<div class="bottom_nav">
		<div class="bx clear">
			<ul class="shopping_directory float nav_margin">
				<li class="nav_header">购物指南</li>
				<li><a href="javascript:;">新手指南</a></li>
				<li><a href="javascript:;">常见问题</a></li>
				<li><a href="javascript:;">帮助中心</a></li>
				<li><a href="javascript:;">用户协议</a></li>
			</ul>
			<ul class="about_us float nav_margin">
				<li class="nav_header">关于我们</li>
				<li><a href="javascript:;">关于我们</a></li>
				<li><a href="javascript:;">加入我们</a></li>
				<li><a href="javascript:;">联系我们</a></li>
			</ul>
			<ul class="payment_method float nav_margin">
				<li class="nav_header">支付方式</li>
				<li><a href="javascript:;">快捷方式</a></li>
				<li><a href="javascript:;">信用卡</a></li>
				<li><a href="javascript:;">货到支付</a></li>
			</ul>
			<ul class="merchant_services float nav_margin">
				<li class="nav_header">商家服务</li>
				<li><a href="javascript:;">商家入驻</a></li>
				<li><a href="javascript:;">商家中心</a></li>
				<li><a href="javascript:;">物流服务</a></li>
			</ul>
			<div class="float follow">
				<p>关注微信</p>
				<a href="javascript:;">
					<img src="" alt="">
				</a>
			</div>
		</div>
	</div>
	<div class="copyright">
		<div class="copyright_content">
			<div class="copyright_nav">
				<a href="javascript:;">天猫</a>
				<span>|</span>
				<a href="javascript:;">京东</a>
				<span>|</span>
				<a href="javascript:;">YunOs</a>
				<span>|</span>
				<a href="javascript:;">阿里通信</a>
				<span>|</span>
				<a href="javascript:;">万网</a>
				<span>|</span>
				<a href="javascript:;">高德</a>
				<span>|</span>
				<a href="javascript:;">友视</a>
				<span>|</span>
				<a href="javascript:;">友盟</a>
				<span>|</span>
				<a href="javascript:;">虾米</a>
				<span>|</span>
				<a href="javascript:;">天天动听</a>
			</div>
			<div class="copyright_disorder">
				Copyright © 2008-2016 vip.com，All Rights Reserved
				<a class="hao" href="javascript:;">粤ICP备08114786号</a>
			</div>
			<div class="makeup">
				<a href="javascript:;">版权所有</a>
				<a href="javascript:;">美妆商城</a>
			</div>
		</div>
	</div>
</body>
<script src="../script/jquery.min.js"></script>
<script>
	var province_id = document.querySelector('#province_id')
	var city_id = document.querySelector('#city_id')
	var county_id = document.querySelector('#county_id')
	var jtid = document.querySelector('#jtid')
	var ressee = document.querySelector('#ressee')
	var phone = document.querySelector('#phone')
	var city = ''
	var sid = 0
	var xid = 0
	var qid = 0
	var race = document.querySelector('.race')
	$('.toaddress span').click(function () {
		$(this).parents('.raceadd').hide().siblings('.cont_add_ress').show()
	})
	$.get('http://1.14.68.137:8000/areas/', function (data) {
		var datas = data.data
		// console.log(datas);
		for (var i = 0; i < datas.length; i++) {
			var option = $('<option></option>')
			option.text(datas[i].name)
			option.attr('data-index', datas[i].id)
			$('#province_id').append(option)
		}
		province_id.addEventListener('change', function () {
			var index_ = this.selectedIndex
			// console.log(index_);
			var index_id = this.options[index_].getAttribute('data-index')
			sid = index_id
			console.log(sid);
			// console.log(index_id);
			for (var j = 0; j < datas.length; j++) {
				if (index_id == datas[j].id) {
					city = datas[j].children
					city_id.innerHTML = ''
					for (var k = 0; k < city.length; k++) {
						var options = document.createElement('option')
						options.innerText = city[k].name
						options.setAttribute('data-index', city[k].id)
						city_id.appendChild(options)
					}
				}
			}
		})
		city_id.addEventListener('change', function () {
			var index_A = this.selectedIndex
			var index_a_id = this.options[index_A].getAttribute('data-index')
			xid = index_a_id
			// console.log(index_a_id);
			console.log(xid);
			for (var a = 0; a < city.length; a++) {
				if (index_a_id == city[a].id) {
					city_ = city[a].children
					county_id.innerHTML = ''
					for (var o = 0; o < city_.length; o++) {
						var options = document.createElement('option')
						options.innerText = city_[o].name
						options.setAttribute('data-index', city_[o].id)
						county_id.appendChild(options)
					}
				}
			}
		})
		county_id.addEventListener('change', function () {
			var index_B = this.selectedIndex
			var index_b_id = this.options[index_B].getAttribute('data-index')
			qid = index_b_id
			console.log(qid);
		})
	})
	var tokens = document.cookie
	console.log(tokens);
	var arr = tokens.split("; ");
	var tokens_ = {}
	for (var i = 0; i < arr.length; i++) {
		tokens_[arr[i].split("=")[0]] = arr[i].split("=")[1]
	}
	console.log(tokens_.token); // token
	//获取所有收货地址
	function ajax_() {
		$.ajax({
			url: 'http://1.14.68.137:8000/address/',
			type: "get",
			headers: {
				"token": tokens_.token
			},
			success: function (data) {
				console.log(data);
				var datas = data.data
				console.log(datas);
				for (let i = 0; i < datas.length; i++) {
					$race = '<div class="race_infor cf" data-id="' + datas[i].id + '"> \
								<div class="name">'+ datas[i].name + '</div> \
								<div class="phone">'+ datas[i].phone + '</div> \
								<div class="address">'+ datas[i].province + ' ' + datas[i].city + ' ' + datas[i].county + ' ' + datas[i].detail + '</div> \
								<div class="operation"> \
									<a class="update" href="javascript:;">编辑</a> \
									<a class="delete" href="javascript:;">删除</a> \
								</div> \
							</div>';
					$(".race").append($race);
				}

			}
		})
	}
	ajax_()
	//删除地址
	$('.race').on('click', '.race_infor .delete', function () {
		var dataid = $(this).parents('.race_infor').attr('data-id')
		$(this).parents('.race_infor').remove()
		$.ajax({
			url: 'http://1.14.68.137:8000/address/',
			type: 'DELETE',
			data: {
				id: dataid,
			},
			headers: {
				"token": tokens_.token
			},
			success: function (data) {
				console.log(data);

			}
		})
	})
	//保存添加地址
	$('.preser_').click(function () {
		$.ajax({
			url: 'http://1.14.68.137:8000/address/',
			type: 'post',
			data: {
				province_id: sid,
				city_id: xid,
				county_id: qid,
				detail: $('#jtid').val(),
				name: $('#ressee').val(),
				phone: $('#phone').val(),
				default: 1
			},
			headers: {
				"token": tokens_.token
			},
			success: function (data) {
				console.log(data);
			}
		})
		ajax_()
		$(this).parents('.cont_add_ress').hide().siblings('.raceadd').show()
		location.reload(true)
	})
// 	/* 省级联动 */
// 	var addIp = "http://1.14.68.137:8000";
// 	var province_id = $("#province_id");
// 	var city_id = $("#city_id");
// 	var county_id = $("#county_id");
// 	var jtid = $("#jtid")[0];
// 	var city_xz = $("#city_id>option").eq(0).clone(true);
// 	var county_xz = $("#county_id>option").eq(0).clone(true);
// 	// var addressIP = "";
// 	// var province_name = "";
// 	// var city_name = "";
// 	// var county_name = "";
// 	var province_opt = "";
// 	var city_opt = "";
// 	var county_opt = "";
// 	var city = "";
// 	var cityArr = ""
// 	var addressObj = {}
// 	var $race = ""
// 	var dataId = ""
// 	$.get(addIp+"/areas/", {}, function (x) {
// 		var data = x.data;
// 		for (var i = 0 ; i < data.length ; i++) {
// 			var $optCopy = $("#opt").clone(true);
// 			$optCopy.attr("id", "");
// 			$optCopy.attr("data-index", data[i].id);
// 			$optCopy.html(data[i].name);
// 			$("#province_id").append($optCopy[0]);
// 		};
// 		province_id.change(function () {
// 			province_opt = this.options[this.selectedIndex].getAttribute("data-index");
// 			// province_name = this.options[this.selectedIndex].value;
// 			county_id.html("");
// 			county_id.append(county_xz);
// 			addoption(province_opt, city_id, data, city_xz);
// 			cityArr = city
// 		});
// 		city_id.change(function () {
// 			city_opt = this.options[this.selectedIndex].getAttribute("data-index");
// 			// city_name = this.options[this.selectedIndex].value;
// 			addoption(city_opt, county_id, cityArr, county_xz);

// 		});
// 		county_id.change(function () {
// 			// county_name = this.options[this.selectedIndex].value;
// 			county_opt = this.options[this.selectedIndex].getAttribute("data-index");
// 		});
// 		function addoption(opt, twoNodeId, arrName, copyNode) {
// 			for (var i = 0 ; i < arrName.length ; i++) {
// 				if (opt == arrName[i].id) {
// 					city = arrName[i].children;
// 					twoNodeId.html("");
// 					twoNodeId.append(copyNode);
// 					for (var j = 0 ; j < city.length ; j++) {
// 						var $optCopy = $("#opt").clone(true);
// 						$optCopy.attr("id", "");
// 						$optCopy.attr("data-index", city[j].id);
// 						$optCopy.html(city[j].name);
// 						$(twoNodeId).append($optCopy);
// 					};
// 					break;
// 				};
// 			};
// 		};
// 	});
// 	var cookie = document.cookie
// 	/* 先截取到问号后面的所有字符串，不包括问号 */
// 	cookie = cookie.substring(cookie.indexOf("?") + 1);
// 	// 查看字符串，找找其中的规律，
// 	// 把字符串按&转换为数组
// 	var arr = cookie.split("; ");
// 	/* 定义一个对象 */
// 	var cookieObj = {};
// 	/* 使用for循环让转换为数组中的每个字符串转换为新创建对象的属性 */
// 	for (var i = 0 ; i < arr.length ; i++) {
// 		cookieObj[arr[i].split("=")[0]] = arr[i].split("=")[1];
// 	};
// 	console.log(cookieObj.token)
// 	$(".toaddress").click(function () {
// 		$(this).parent().parent().hide();
// 		$(".cont_add_ress").show();
// 		$('.preser').show()
// 		$('.edit_save').hide()
// 	});
// 	$(".return").click(function () {
// 		$(".raceadd").show();
// 		$(this).parent().parent().hide();
// 	});
// 	$("#whether").click(function () {
// 		$(this).attr("checked", !$(this).attr("checked"));
// 		$(this).attr("checked");
// 	})
// /* 添加收货地址 */
// 	$(".preser").click(function () {
// 		addressObj = {
// 				province_id: province_opt,
// 				city_id: city_opt,
// 				county_id: county_opt,
// 				detail: $("#jtid").val(),
// 				name: $("#ressee").val(),
// 				phone: $("#phone").val(),
// 				default: 1
// 			};
// 		if (!$("#whether").attr("checked")) {
// 			delete addressObj.default
// 		}
// 		$.ajax({
// 			url: addIp + "/address/",
// 			type: "POST",
// 			dataType: "json",
// 			data: addressObj,
// 			headers: {
// 				"token": cookieObj.token
// 			},
// 			success: function (x) {
// 				alert(x.msg)
// 			}
// 		})
// 		$(".race").html("");
// 		getAddress();
// 		province_id.val(province_id.children().eq(0).val());
// 		city_id.val(city_id.children().eq(0).val());
// 		county_id.val(county_id.children().eq(0).val());
// 		$("#whether").attr("checked", false);
// 		$("#jtid").val("");
// 		$("#ressee").val("");
// 		$("#phone").val("");
// 		$(".regu_ress").html("");
// 		$(".regu_phone").html("");
// 	});
// /* 获取收货地址 */
// 	getAddress();
// 	function getAddress() {
// 		$.ajax({
// 			url: addIp + "/address/",
// 			type: "GET",
// 			dataType: "json",
// 			headers: {
// 				"token": cookieObj.token
// 			},
// 			success: function (x) {
// 				console.log(x)
// 				var addData = x.data;
// 				var str = "";
// 				if (addData) {
// 					$.each(addData, function (i, e) {
// 						if (e.default == 1) {
// 							str = "是";
// 						}else {
// 							str = "否";
// 						}
// 						$race = '<div class="race_infor cf" data-id="'+e.id+'"> \
// 										<div class="name">'+e.name+'</div> \
// 										<div class="phone">'+e.phone+'</div> \
// 										<div class="address">'+e.province+' '+e.city+' '+e.county+' '+e.detail+'</div> \
// 										<div class="default">'+str+'</div> \
// 										<div class="operation"> \
// 											<a class="update" href="javascript:;">编辑</a> \
// 											<a class="delete" href="javascript:;">删除</a> \
// 										</div> \
// 									</div>';
// 						$(".race").append($race);
// 					})
// 				}else {
// 					return
// 				}
// 			}
// 		})
// 	}
// /* 删除收货地址 */
// 	$(".race").on("click", ".race_infor .delete", function () {
// 		if(confirm('确定要删嘛')) {
// 			$(this).parent().parent().remove();
// 			dataId = $(this).parent().parent().attr("data-id");
// 			$.ajax({
// 				url: addIp + "/address/",
// 				type: "DELETE",
// 				dataType: "json",
// 				data: {id: dataId},
// 				headers: {
// 					"token": cookieObj.token
// 				},
// 				success: function (x) {
// 					alert(x.msg)
// 				}
// 			})
// 		}
// 	})
//  // 编辑收获地址
// 	$('.race').on('click','.race_infor .update',function(){
// 		$('.toaddress').parent().parent().hide();
// 		$(".cont_add_ress").show();
// 		$('.preser').hide()
// 		$('.edit_save').show()
// 	})
// 	$('.edit_save').click(function(){
// 		$('.race .name').html($("#ressee").val());
// 		$('.race .phone').html( $("#phone").val());
// 		$('.race .address').html($('#province_id').val()+$('#city_id').val()+$('#county_id').val()+$("#jtid").val());
// 		if ($('.whether').attr('checked',true)) {
// 			 $('.race .default').html("是");
// 		}else {
// 			$('.race .default').html("否");
// 		}
// 		obj = {
// 			id:$('.race').children().attr('data-id'),
// 			province_id: province_opt,
// 			city_id: city_opt,
// 			county_id: county_opt,
// 			detail: $("#jtid").val(),
// 			name: $("#ressee").val(),
// 			phone: $("#phone").val(),
// 			default: 1,
// 		};
// 		if(!$('.whether').attr('checked')) {
// 			 delete obj.default
// 		}
// 		$.ajax({
// 			url:addIp+'/address/',
// 			type:'PUT',
// 			dataType:'json',
// 			data:obj,
// 			headers:{
// 				'token':cookieObj.token
// 			},
// 			success:function(x){
// 				console.log(x)
// 			}
// 		})
// 	})

// /* 正则验证 */
// 	var phoneReg = /^1[3-9][0-9]{9}/;
// 	$("#ressee").blur(function () {
// 		if ($(this).val()) {
// 			if ($(this).val().length > 6) {
// 				$(".regu_ress").html("收件人输入不规范，请重新输入！！！");
// 				$(".regu_ress").css({color: "#e05"});
// 				$(this).val("");
// 			}else {
// 				$(".regu_ress").html("通过");
// 				$(".regu_ress").css({color: "#00cc00"});
// 			}
// 		}
// 	})
// 	$("#phone").blur(function () {
// 		if ($(this).val()) {
// 			if (!phoneReg.test($(this).val())) {
// 				$(".regu_phone").html("手机号输入不规范，请重新输入！！！");
// 				$(".regu_phone").css({color: "#e05"});
// 				$(this).val("");
// 			}else {
// 				$(".regu_phone").html("通过");
// 				$(".regu_phone").css({color: "#00cc00"});
// 			}
// 		}
// 	})
// 	$("#sgin").click(function () {
// 		location.href = "../sign_in.html";
// 	})

// if(cookieObj.user ){
// 	$('.log').html('您好! '+cookieObj.user)
// }else{
// 	$('.log').html('请登录')
// }	
</script>

</html>